<template>
  <div>
    <h3><h5>生成时间 {{ data.create_time }}</h5></h3>
    <div style="padding: 10px;margin-bottom: 10px;margin-left: 15px;">
      <el-collapse v-model="activeName" :accordion="true" @change="handleCollapseChange">
        <el-collapse-item title="单次测评结果" name="1">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>职业兴趣测试</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click.native="handleResult(data.interest)">查看</el-button>
                </div>
                <div>
                  {{ data.interest }}
                </div>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>职业价值观测试</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click.native="handleResult(data.worth)">查看</el-button>
                </div>
                <div>
                  {{ data.worth }}
                </div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>MBTI性格测试</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click.native="handleResult(data.character)">查看</el-button>
                </div>
                <div>
                  {{ data.character }}
                </div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>多元智能测试</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click.native="handleResult(data.intelligence)">查看</el-button>
                </div>
                <div>
                  {{ data.intelligence }}
                </div>
              </el-card>
            </el-col>
            <el-col :span="4">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>成长环境测试</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click.native="handleResult(data.grown)">查看</el-button>
                </div>
                <div>
                  {{ data.grown }}
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item v-loading="majorLoading" title="推荐专业类" name="2">
          <!--          <Bar ref="major" cid="2" :title="majorTitle" :data="majorData" />-->
          <el-table :data="majorData" border>
            <el-table-column label="专业名称" prop="major" />
            <el-table-column label="专业分数" prop="score">
              <template slot-scope="props">
                {{ props.row.score.toFixed(1) }}
              </template>
            </el-table-column>
          </el-table>
          <div style="height: 10px;" />
          <div style="text-align: left">
            <el-pagination
              :current-page="majorPage"
              :page-size="10"
              layout="total, prev, pager, next"
              :total="majorTotal"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-collapse-item>
        <el-collapse-item v-loading="professionLoading" title="推荐职行业" name="3">
          <!--          <Bar ref="profession" cid="3" :data="professionData" :title="professionTitle" />-->
          <el-table :data="professionData" border>
            <el-table-column label="职行业名称" prop="profession_type" />
            <el-table-column label="分数" prop="score">
              <template slot-scope="props">
                {{ props.row.score.toFixed(1) }}
              </template>
            </el-table-column>
          </el-table>
          <div style="height: 10px;" />
          <div style="text-align: left">
            <el-pagination
              :current-page="professionPage"
              :page-size="10"
              layout="total, prev, pager, next"
              :total="professionTotal"
              @current-change="handleProfessionCurrentChange"
            />
          </div>
        </el-collapse-item>
      </el-collapse>

      <el-dialog title="单项测试结果说明" :visible.sync="visible">
        <el-tabs tab-position="left">
          <el-tab-pane v-for="item in testData" :key="item.id" :label="item.type">
            <el-form label-position="top">
              <el-form-item label="生涯类型">
                {{ item.type }}
              </el-form-item>
              <el-form-item label="结果说明">
                {{ item.explain }}
              </el-form-item>
              <el-form-item label="推荐专业">
                <div>
                  <h4 style="display: inline">优先推荐</h4>
                  <div v-for="x in item.first_majors" :key="x.major" :gutter="20">
                    <span><h5 style="display: inline">{{ x.category }}</h5> {{ x.major }}</span>
                  </div>
                </div>
                <div>
                  <h4 style="display: inline">次级推荐</h4>
                  <div v-for="x in item.second_majors" :key="x.major" :gutter="20">
                    <span><h5 style="display: inline">{{ x.category }}</h5> {{ x.major }}</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="职业特征">
                {{ item.feature }}
              </el-form-item>
              <el-form-item label="典型职业">
                <div v-for="(x,index) in item.professions" :key="index">
                  {{ x.profession }}
                </div>
              </el-form-item>
              <el-form-item label="专家建议">
                {{ item.suggest }}
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { careerDetails, results } from '../../../api/careers'

export default {
  name: 'Result',
  components: {
    // Bar: () => import('./components/Bar')
  },
  props: {
    data: {
      type: [Object],
      required: true
    }
  },
  data() {
    return {
      visible: false,
      testData: [],
      testFirstMajors: [],
      testSecondMajors: [],
      testProfessions: '',
      activeName: 1,
      majorTitle: [],
      majorData: [],
      majorTotal: 0,
      majorPage: 1,
      majorLoading: false,
      professionPage: 1,
      professionTotal: 0,
      professionData: [],
      professionLoading: false,
      professionTitle: []
    }
  },
  methods: {
    handleResult(condition) {
      console.log(condition)
      const loading = this.$loading({
        lock: true,
        text: '查询中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      results({
        search: condition
      }).then(res => {
        this.testData = res
        this.visible = true
        console.log(res)
      }).finally(() => {
        loading.close()
      })
    },
    handleCollapseChange(value) {
      console.log(value)
      switch (value) {
        case '2':
          this.handleMajor()
          break
        case '3':
          this.handleProfession()
          break
        default:
          break
      }
    },
    handleCurrentChange(page) {
      this.majorPage = page
      this.handleMajor()
    },
    handleProfessionCurrentChange(page) {
      this.professionPage = page
      this.handleProfession()
    },
    handleMajor() {
      this.majorLoading = true
      const title = []
      const data = []
      careerDetails(this.data.id).then(res => {
        res.majors.map((major) => {
          title.push(major.major)
          data.push(major.score)
        })

        this.majorData = res.majors.filter((item, index) => {
          return index < this.majorPage * 10 && index >= (this.majorPage - 1) * 10
        })
        // this.majorTitle = title.filter((item, index) => {
        //   return index < this.majorPage * 10 && index >= (this.majorPage - 1) * 10
        // })

        this.majorTotal = res.majors.length
        console.log('major', this.majorPage)
        // this.$refs['major'].initCharts()
      }).finally(() => {
        this.majorLoading = false
      })
    },
    handleProfession() {
      this.professionLoading = true
      const title = []
      const data = []
      careerDetails(this.data.id).then(res => {
        res.professions.map((profession) => {
          title.push(profession.profession_type)
          data.push(profession.score)
        })

        this.professionData = res.professions.filter((item, index) => {
          return index < this.professionPage * 10 && index >= (this.professionPage - 1) * 10
        })
        // this.professionTitle = title.filter((item, index) => {
        //   return index < this.professionPage * 10 && index >= (this.professionPage - 1) * 10
        // })

        this.professionTotal = res.professions.length
        // this.$refs['profession'].initCharts()
      }).finally(() => {
        this.professionLoading = false
      })
      console.log('profession')
    }
  }
}
</script>

<style scoped>

</style>
